<%@ page pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="protocol" value="http://" />
<c:set var="dn" value="localhost:8080" />
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<script type="text/javascript">
	window.protocol = '${protocol}';
	window.dn = '${dn}';
</script>
<!doctype html>
<html>
<head>
<title>jquery layout 页面布局插件演示</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<link rel="stylesheet" href="${ctx}/css/global.css" />
<script type="text/javascript" src="${ctx}/js/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	window.ctx = '${ctx}';
</script>

<link rel="stylesheet" href="${ctx}/js/jquery/layout/themes/jquery.layout.css" />
<link rel="stylesheet" href="${ctx}/js/jquery/ui/themes/smoothness/jquery-ui-1.8.20.css" />
<script type="text/javascript" src="${ctx}/js/jquery/ui/jquery-ui-1.8.20.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery/layout/jquery.layout.js"></script>
<script>
$(document).ready(function() {
	/* applyDefaultStyles 是否使用默认样式，若不使用，设置为false，将引用自定的样式，样式规则请参考jquery.layout.css */
	$('body').layout({ applyDefaultStyles: false });
});
</script>
</head>

<body>
<!-- 中间板块 -->
<div class="ui-layout-center">center
	<p><a href="http://layout.jquery-dev.net/demos.html">go to the demos page</a></p>
	<p>* pane-resizing is disabled because ui.draggable.js is not linked</p>
	<p>* pane-animation is disabled because ui.effects.js is not linked</p>
</div>
<!-- 北面板块（上边） -->
<div class="ui-layout-north">north</div>
<!-- 南面板块（下边） -->
<div class="ui-layout-south">south</div>
<!-- 西面板块（左边） -->
<div class="ui-layout-east">east</div>
<!-- 东面板块（右边） -->
<div class="ui-layout-west">west</div>
</body>
</html>
